<template>
    <div>
        <div ref="Pie" :style="styleClass" element-loading-text="获取数据中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"></div>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, onBeforeUnmount, reactive, getCurrentInstance } from 'vue';

//***引入
import * as echarts from 'echarts';
import { object, array } from 'vue-types';

const props = defineProps({
    styleClass: {
        type: Object,
        default: false
    },
    chartData: {
        type: Array<any>,
        default: false
    }
});

const data = reactive(props.chartData)


let myChart: any = null

let category = [
    "名字1",
    "名字2",
    "名字3",
    "名字4",
    "名字5",
    "名字6",
    "名字7",
    "名字8",
    "名字9",
    "名字10"
];
// 售卖数量
let salesData = [
    18092, 20728, 24045, 28348, 32808, 36097, 39867, 44715, 48444, 50415
];
// 退货数量
let returnData = [
    4600, 5000, 5500, 6500, 7500, 8500, 9900, 12500, 14000, 21500, 11500
];
// 退货率
let returnRate: any = [];

for (var i = 0; i < salesData.length; i++) {
    var rate = returnData[i] / salesData[i];
    returnRate[i] = rate.toFixed(2);
}

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const initChart = () => {
    let Pie = proxy?.$refs.Pie
    // @ts-ignore
    myChart = echarts.init(Pie);
    // 指定图表的配置项和数据
    let option = {
        // title: {
        //     text: "增量设备贯通情况-单位",
        //     x: "center",
        //     y: 0,
        //     textStyle: {
        //         color: "#B4B4B4",
        //         fontSize: 16,
        //         fontWeight: "normal",
        //     },
        // },
        // backgroundColor: "#191E40",
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.9)",
            // formatter: "{a} : {b} {d}  {c}%",
            formatter: function (prams: any) {
                // console.log('prams', prams)
                let str = `主播：${prams[0].axisValue}<br/>`
                prams.map((item: any) => {
                    if (item.seriesName == '退品率') {
                        str += item.marker + ' ' + item.seriesName + '：' + (item.value * 100).toFixed(2) + '%<br/>'
                    } else {
                        str += item.marker + ' ' + item.seriesName + '：' + item.value + '个<br/>'
                    }
                })
                return str;
            },
            axisPointer: {
                type: "shadow",
                label: {
                    show: true,
                    backgroundColor: "#7B7DDC",
                },
            },
        },
        legend: {
            data: ["售卖数量", "退品数量", "退品率"],
            textStyle: {
                color: "#fff",
            },
            bottom: "0%",
        },
        grid: {
            x: "12%",
            width: "82%",
            y: "12%",
        },
        xAxis: {
            data: category,
            axisLine: {
                lineStyle: {
                    color: "#B4B4B4",
                },
            },
            axisTick: {
                show: false,
            },
        },

        yAxis: [
            {
                splitLine: { show: false },
                axisLine: {
                    lineStyle: {
                        color: "#fff",
                    },
                },

                axisLabel: {
                    formatter: "{value} ",
                },
            },
            {
                splitLine: { show: false },
                axisLine: {
                    lineStyle: {
                        color: "#fff",
                    },
                },
                axisLabel: {
                    formatter: "{value} ",
                },
            },
        ],

        series: [
            {
                name: "退品率",
                type: "line",
                smooth: true,
                showAllSymbol: true,
                symbol: "emptyCircle",
                symbolSize: 8,
                yAxisIndex: 1,
                itemStyle: {
                    color: "#F02FC2",
                },
                data: returnRate,
            },

            {
                name: "退品数量",
                type: "bar",
                barWidth: 10,
                itemStyle: {
                    // barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#05A998" },
                        { offset: 1, color: "#63FBFC" },
                    ]),
                },
                data: returnData,
            },

            {
                name: "售卖数量",
                type: "bar",
                // barGap: "-100%",
                barWidth: 10,
                itemStyle: {
                    // barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#1B63CC" },
                        { offset: 1, color: "#03DFFC" },
                    ]),
                },
                // z: -12,

                data: salesData,
            },
        ],
    };
    option && myChart.setOption(option);
}



window.addEventListener("resize", () => {
    myChart.resize()
});

//*** 挂载Echarts
onMounted(() => {
    initChart()
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        myChart.resize()
    });
    // ResizeListener.uninstall(myChart)
})



</script>